<template>
	<view>
		<image style="width: 400rpx;height: 400rpx; position: absolute; left: 20%; top:20%;"
		    src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" :class="skillsList.length === 0 ? 'show' : 'hidde' "></image>
		
		<uni-collapse>
			<uni-collapse-item v-for="(obj,no) in skillsList" :key="no" title-border="show">
				<template v-slot:title>
					<view style="padding: 10px;">
						<uni-badge size="small" :text="obj.count" absolute="rightTop" :offset="[-5, 1]" type="error">
							{{getSkillsType(obj.type)}}
						</uni-badge>
					</view>
				</template>
				<view style="padding-bottom: 10px;">
					<uni-card  v-for="(item,index) in obj.items" :key="index" :title="item.title" :extra="item.studyBatch === 0 ? '永久':'第'+item.studyBatch+'批次'">
						<uni-row>
							<uni-col :span="10">
								<image style="height: 250rpx;width: 250rpx;" :src="item.img"></image>
							</uni-col>
							
							<uni-col :span="13" :offset="1">
								<view style="line-height: 3;height: 250rpx;display: flex;align-items: center;">
									<view>
										<uni-row>
											<uni-tag v-if="item.studyStatus" text="已学习" type="success" size="small" style="margin-right: 20px;"></uni-tag>
											<uni-tag v-else text="未学习" type="error" size="small" style="margin-right: 20px;"></uni-tag>
											
											<uni-tag v-if="item.isPassed&&item.examNum!==0" text="已达标" type="success" size="small"></uni-tag>
											<uni-tag v-else-if="!item.isPassed&&item.examNum!==0" text="未达标" type="error" size="small"></uni-tag>
										</uni-row>
										<uni-row>
											<text style="font-size: 13px;">开始时间：{{ item.startDate ===null ? '-' : item.startDate}}</text>
										</uni-row>
										<uni-row>
											<text style="font-size: 13px;">结束时间：{{ item.endDate ===null ? '-' : item.endDate}}</text>
										</uni-row>
									</view>
								</view>
							</uni-col>
						</uni-row>
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" @click="toStudy(item)">
								<uni-icons type="eye" size="20" color="#999"></uni-icons>
								<text class="card-actions-item-text">学习</text>
							</view>
							<view v-if="item.examNum !== 0" class="card-actions-item" @click="toQuestion(item)">
								<uni-icons type="compose" size="20" color="#999"></uni-icons>
								<text class="card-actions-item-text">答题</text>
							</view>
						</view>
					</uni-card>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		
		<uni-popup ref="message" type="message">
			<uni-popup-message type="warn" :message="alertMsg" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import knowledge from '@/api/modules/knowledge';
	import commmon from '@/api/modules/common.js'
	
	export default {
		data() {
			return {
				skillsList : [] ,//技能列表
				skillsType : {}, //技能类型
				alertMsg : '', //提示消息
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				knowledge.getSkillsBatchByUserId(uni.getStorageSync("loginId")).then(res=> {
					this.skillsList = res.data;
					
					this.skillsList = res.data.reduce((acc, item) => {
						let found = acc.find(cls => cls.type === item.type);
						if (!found) {
							found = { type: item.type, count: 0, items: [] };
							acc.push(found);
						}
						found.items.push(item);
						if (!item.isPassed) {
							found.count++;
						}
						return acc;
					}, []);
				})
				commmon.getDictByType("knowledge_type").then(res=> {
					res.data.forEach(item => {
						this.$set(this.skillsType, item.dictValue, item.dictLabel);
					});
				})
			},
			getSkillsType(type) {
				return this.skillsType[type];
			},
			toStudy(item) {
				let studyDateStatus = true;
				if(item.cycle) {
					studyDateStatus = this.isTodayInDateRange(item.startDate,item.endDate);
				}
				
				let status = !item.studyStatus && studyDateStatus; //是否满足学习条件（没有学习并且在学习时间内）
				uni.navigateTo({
					url: `/pages_duty/common/knowledge/skills/skillsDetails?id=${item.id}
						&studyStatus=${item.studyStatus}&batchId=${item.batchId}&status=${status}`
				})
			},
			toQuestion(item) {
				let studyDateStatus = true;
				if(item.cycle) {
					studyDateStatus = this.isTodayInDateRange(item.startDate,item.endDate);
				}
				if(!studyDateStatus) {
					this.alertMsg = '学习时间已过,无法答题!';
					this.$refs.message.open();
					return;
				}
				if(item.studyStatus) {
					uni.navigateTo({
						url: `/pages_duty/common/knowledge/skills/questions?id=${item.id}&batchId=${item.batchId}`
					})
				}else {
					this.alertMsg = '请先完成学习!';
					this.$refs.message.open();
				}
			},
			//检查今天是否在学习时间内
			isTodayInDateRange(startDate,endDate) {
				const start = new Date(startDate);
				const end = new Date(endDate);
				end.setHours(23, 59, 59, 999); 
				const today = new Date();
				// 检查今天的日期是否在范围内
				return today >= start && today <= end;
			},
		}
	}
</script>

<style>
	.show {
		display: block;
	}
	.hidde {
		display: none;
	}
	.info-container {
	  display: flex;  
	  justify-content: space-between;  
	  align-items: center;  
	}  
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
</style>
